@charset "UTF-8";


/**----------------------------------布局Layout大类：控制元素是否显示及如何显示、是否浮动及如何浮动、可视区域裁剪控制、内容溢出控制等------------------------------------------**/


/**
目录分类：
	bc-la-d[-类型][类别]：display，用于设置元素的是否显示及如何显示。相关属性：float属性、visibility属性、width属性、height属性。
	bc-la-f[-类型][类别]：float，用于设置元素是否浮动及如何浮动。相关属性：clear属性、width属性、height属性。注意：若此元素设置为浮动，则该元素将被当作块元素（display:block;），即使元素的display属性设置为其他值也无效。
	bc-la-c[-类型][类别]：clear，用于设置元素的左右是否允许出现浮动元素。相关属性：float属性。
	bc-la-v[-类型][类别]：visibility，用于设置元素的是否可见。注意：同样是隐藏元素时，使用visibility属性隐藏的元素保留其占据的物理空间，使用display隐藏的元素不保留其占据的物理空间 。
	bc-la-clip[类别]：clip，用于控制对元素的如何进行裁剪，被裁剪的矩形区域为可视区域，可视区域外的部分不显示（透明）。相关属性：position属性、overflow属性。注意：必须将position属性设置为absolute，且overflow属性设置为hidden，才能很好的看到该属性的实际效果。
	bc-la-o[-类型][类别]：overflow，用于设置元素的内容超过其指定高度及宽度时如何管理溢出的内容，即：如何显示滚动条。
	bc-la-ox[-类型][类别]：overflow-x，用于设置元素的内容超过其指定宽度时如何管理溢出的内容，即：如何显示水平滚动条。
	bc-la-oy[-类型][类别]：overflow-y，用于设置元素的内容超过其指定高度时如何管理溢出的内容，即：如何显示垂直滚动条。
*/




/**
设置元素的是否显示及如何显示：
格式：
	bc-la-d[-类型][类别]
说明：
	前缀为bc-la-d，代表：display，用于设置元素的是否显示及如何显示。相关属性：float属性、visibility属性。
	类别为数字编号，用于定义各种不同的显示类型。
注意：
	若此元素的float属性设置为浮动，则该元素将被当作块元素（display:block;），即使元素的display属性设置为其他值也无效，而且此时，为此元素设置的width属性和height属性也开始生效。
	若此元素的display属性设置为行内元素（display:inline）能够生效，则即使元素的width属性和height属性设置为其他值也无效，实际的元素width属性值和height属性值等于自动进行“收缩计算”后以仅仅能够包裹内部元素的width值和height值。
类型：
	0|n：none，隐藏元素：与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
	1|i：inline，行内元素（也称内联元素）：即span，input等元素默认就是行内元素。CSS对立样式【默认行内元素或者display:inline生效<---->width和height生效】
	2|b：block，块级元素：即div，p，table等元素默认就是块级元素。CSS等价样式【float生效====display:block】
	3|li：list-item，元素作为列表项：常配合list-style-type属性一起使用，可将元素转换为类似ul元素的作用。
	4|ib：inline-block，元素也作为行内元素，不会独占一行，但是可以通过设置width、height属性指定元素的宽度和高度。
	5|t：table，元素作为表格：将元素转换为类似table元素
	6|it：inline-table，元素作为内联表格，此属性值主要用于设置table元素。因为table元素默认为块级元素，左右都不允许出现其他内容，所以将table元素设置为inline-table（内联表格），让table元素允许其左右出现其他内容。
	7|th：table-caption，元素作为表格标题，类似表格的caption元素。
	8|td：table-cell，元素作为表格单元格，类似表格的td元素。
	9|tr：table-row，元素作为表格行，类似表格的tr元素。
	10|trg：table-row-group，元素作为表格行组，类似表格的tbody元素。
	11|tc：table-column，元素作为表格列，类似表格的col元素。
	12|tcg：table-column-group，元素作为表格列组，类似表格的colgroup元素。
	13|thg：table-header-group，元素作为表格标题组，类似表格的thead元素。
	14|tfg：table-footer-group，元素作为表格脚注组，类似表格的tfoot元素。
*/
.bc-la-d0, .bc-la-d-n{
	/*隐藏元素：与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间*/
	display: none;
}
.bc-la-d1, .bc-la-d-i{
	/*行内元素（也称内联元素）：即span，input等元素默认就是行内元素*/
	display: inline;
}
.bc-la-d2, .bc-la-d-b{
	/*块级元素：即div，p，table等元素默认就是块级元素*/
	display: block;
}
.bc-la-d3, .bc-la-d-li{
	/*元素作为列表项：常配合list-style-type属性一起使用，可将元素转换为类似ul元素的作用。*/
	display: list-item;
	/*list-style-type: decimal;*/
}
.bc-la-d4, .bc-la-d-ib{
	/*元素也作为行内元素，不会独占一行，但是可以通过设置width、height属性指定元素的宽度和高度。*/
	display: inline-block;
	/*
	width: 100px;
	height: 100px;
	*/
}
.bc-la-d5, .bc-la-d-t{
	/*元素作为表格：将元素转换为类似table元素*/
	display: table;
}
.bc-la-d6, .bc-la-d-it{
	/*元素作为内联表格，此属性值主要用于设置table元素。因为table元素默认为块级元素，左右都不允许出现其他内容，所以将table元素设置为inline-table（内联表格），让table元素允许其左右出现其他内容。*/
	display: inline-table;
}
.bc-la-d7, .bc-la-d-th{
	/*元素作为表格标题，类似表格的caption元素。*/
	display: table-caption;
}
.bc-la-d8, .bc-la-d-td{
	/*元素作为表格单元格，类似表格的td元素。*/
	display: table-cell;
}
.bc-la-d9, .bc-la-d-tr{
	/*元素作为表格行，类似表格的tr元素。*/
	display: table-row;
}
.bc-la-d10, .bc-la-d-trg{
	/*元素作为表格行组，类似表格的tbody元素。*/
	display: table-row-group;
}
.bc-la-d11, .bc-la-d-tc{
	/*元素作为表格列，类似表格的col元素。*/
	display: table-column;
}
.bc-la-d12, .bc-la-d-tcg{
	/*元素作为表格列组，类似表格的colgroup元素。*/
	display: table-column-group;
}
.bc-la-d13, .bc-la-d-thg{
	/*元素作为表格标题组，类似表格的thead元素。*/
	display: table-header-group;
}
.bc-la-d14, .bc-la-d-tfg{
	/*元素作为表格脚注组，类似表格的tfoot元素。*/
	display: table-footer-group;
}



/**
设置元素是否浮动及如何浮动：
格式：
	bc-la-f[-类型][类别]
说明：
	前缀为bc-la-f，代表：float，用于设置元素是否浮动及如何浮动。相关属性：clear属性。
	类别为数字编号，用于定义各种不同的浮动类型。
注意：
	若此元素设置为浮动，则该元素将被当作块元素（display:block;），即使元素的display属性设置为其他值也无效。
类型：
	0|n：none，默认值，元素不浮动	
	1|l：left，元素浮动在左边	
	2|r：right，元素浮动在右边	
*/
.bc-la-f0, .bc-la-f-n{
	float: none;
}
.bc-la-f1, .bc-la-f-l{
	float: left;
}
.bc-la-f2, .bc-la-f-r{
	float: right;
}



/**
设置元素不允许出现浮动元素的边：
格式：
	bc-la-c[-类型][类别]
说明：
	前缀为bc-la-c，代表：clear，用于设置元素的左右是否允许出现浮动元素。相关属性：float属性。
	类别为数字编号，用于定义各种不同的clear类型。
类型：
	0|n：none，默认值，此元素的左右两边都可以出现浮动元素
	1|b：both，此元素的左右两边都不允许出现浮动元素
	2|l：left，此元素的左边不允许出现浮动元素
	3|r：right，此元素的右边不允许出现浮动元素
*/
.bc-la-c0, .bc-la-c-n{
	float: none;
}
.bc-la-c1, .bc-la-c-b{
	float: both;
}
.bc-la-c2, .bc-la-c-l{
	float: left;
}
.bc-la-c3, .bc-la-c-r{
	float: right;
}



/**
设置元素的是否可见：
格式：
	bc-la-v[-类型][类别]
说明：
	前缀为bc-la-v，代表：visibility，用于设置元素的是否可见。
	类别为数字编号，用于定义各种不同的visibility类型。
注意：
	同样是隐藏元素时，使用visibility属性隐藏的元素保留其占据的物理空间，使用display隐藏的元素不保留其占据的物理空间 。
类型：
	0|v：visible，默认值，元素可见
	1|h：hidden，元素隐藏，或者说元素被“透明”了，保留其占据的物理空间
	2|c：collapse，主要用于隐藏表格的行或列
*/
.bc-la-v0, .bc-la-v-v{
	visibility: visible;
}
.bc-la-v1, .bc-la-v-h{
	visibility: hidden;
}
.bc-la-v2, .bc-la-v-c{
	visibility: collapse;
}



/**
控制对元素的如何进行裁剪：
格式：
	bc-la-clip[类别]
说明：
	前缀为bc-la-clip，代表：clip，用于控制对元素的如何进行裁剪，被裁剪的矩形区域为可视区域，可视区域外的部分不显示（透明）。相关属性：position属性、overflow属性。
注意：
	必须将position属性设置为absolute，且overflow属性设置为hidden，才能很好的看到该属性的实际效果。
*/
.bc-la-clip0{
	/*默认值，不对元素进行任何裁剪*/
	clip: rect(auto auto auto auto);/*相同于：clip: auto;*/
}
.bc-la-clip1{
	/*对应作用边：上、右、下、左*/
	/*示例：*/
	/*
	clip: rect(10px 20px 30px 40px);
	*/
}
.bc-la-clip2{
	/*对应作用边：上、右、下、左*/
	/*示例：*/
	/*
	clip: rect(auto 10px auto 10px);
	*/
}



/**
设置元素的内容超过其指定高度及宽度时如何管理溢出的内容，即：如何显示滚动条：
格式：
	bc-la-o[-类型][类别]
说明：
	前缀为bc-la-o，代表：overflow，用于设置元素的内容超过其指定高度及宽度时如何管理溢出的内容，即：如何显示滚动条。
	类别为数字编号，用于定义各种不同的overflow类型。
类型：
	0|v：visible，默认值，既不剪切内容，也不添加滚动条。当元素不足以容纳内容时，将会看到有“溢出”的内容在元素之外显示的bug效果。
	1|a：auto，在元素不够容纳内容时，将自动添加滚动条。这是body元素和textarea元素的默认值。
	2|s：scroll，不管元素大小是否足够容纳内容，总是显示滚动条。
	3|h：hidden，将超出元素大小的内容进行裁剪，且不出现滚动条。当元素不足以容纳内容时，将无法看到“溢出”的内容。
*/
.bc-la-o0, .bc-la-o-v{
	overflow: visible;
}
.bc-la-o1, .bc-la-o-a{
	overflow: auto;
}
.bc-la-o2, .bc-la-o-s{
	overflow: scroll;
}
.bc-la-o3, .bc-la-o-h{
	overflow: hidden;
}



/**
设置元素的内容超过其指定宽度时如何管理溢出的内容，即：如何显示水平滚动条：
格式：
	bc-la-ox[-类型][类别]
说明：
	前缀为bc-la-ox，代表：overflow-x，用于设置元素的内容超过其指定宽度时如何管理溢出的内容，即：如何显示水平滚动条。
	类别为数字编号，用于定义各种不同的overflow-x类型。
类型：
	0|v：visible，默认值，既不剪切内容，也不添加水平滚动条。当元素的宽度不足以容纳内容时，将会看到有“溢出”的内容在元素之外显示的bug效果。
	1|a：auto，在元素的宽度不够容纳内容时，将自动添加水平滚动条。这是body元素和textarea元素的默认值。
	2|s：scroll，不管元素宽度是否足够容纳内容，总是显示水平滚动条。
	3|h：hidden，将超出元素宽度的内容进行裁剪，且不出现水平滚动条。当元素宽度不足以容纳内容时，将无法看到“溢出”的内容。
*/
.bc-la-ox0, .bc-la-ox-v{
	overflow-x: visible;
}
.bc-la-ox1, .bc-la-ox-a{
	overflow-x: auto;
}
.bc-la-ox2, .bc-la-ox-s{
	overflow-x: scroll;
}
.bc-la-ox3, .bc-la-ox-h{
	overflow-x: hidden;
}



/**
用于设置元素的内容超过其指定高度时如何管理溢出的内容，即：如何显示垂直滚动条：
格式：
	bc-la-oy[-类型][类别]
说明：
	前缀为bc-la-oy，代表：overflow-y，用于设置元素的内容超过其指定高度时如何管理溢出的内容，即：如何显示垂直滚动条。
	类别为数字编号，用于定义各种不同的overflow-y类型。
类型：
	0|v：visible，默认值，既不剪切内容，也不添加垂直滚动条。当元素的高度不足以容纳内容时，将会看到有“溢出”的内容在元素之外显示的bug效果。
	1|a：auto，在元素的高度不够容纳内容时，将自动添加垂直滚动条。这是body元素和textarea元素的默认值。
	2|s：scroll，不管元素高度是否足够容纳内容，总是显示垂直滚动条。
	3|h：hidden，将超出元素高度的内容进行裁剪，且不出现垂直滚动条。当元素高度不足以容纳内容时，将无法看到“溢出”的内容。
*/
.bc-la-oy0, .bc-la-oy-v{
	overflow-y: visible;
}
.bc-la-oy1, .bc-la-oy-a{
	overflow-y: auto;
}
.bc-la-oy2, .bc-la-oy-s{
	overflow-y: scroll;
}
.bc-la-oy3, .bc-la-oy-h{
	overflow-y: hidden;
}






